<template>
   
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写基本信息"></el-step>
      <el-step title="填写社交信息"></el-step>
    </el-steps>
    <actor-info
      v-show="showStatus[0]"
      v-model="actorParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
    ></actor-info>
    <actor-soical-info
      v-show="showStatus[1]"
      v-model="actorParam"
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit"
    ></actor-soical-info>
  </el-card>
</template>
<script>
import actor from "@/api/actor";
import actorInfo from "@/views/actor/components/actorInfo";
import actorSoicalInfo from "@/views/actor/components/actorSoicalInfo";

const defaultactorParam = {
  id: null,
  name: null,
  age: 0,
  avatar: null,
  cover: null,
  height: null,
  weight: null,
  occupation: null,
  city: null,
  size: null,
  birthday: null,
  constellation: null,
  hobby: null,
  wechat: null,
  phone: null,
  email: null,
  actorSocialInfo:{
    phone:null,
    wechat:null,
    email:null
  }
};
export default {
  name: "actorDetail",
  components: { actorInfo, actorSoicalInfo },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: 0,
      actorParam: Object.assign({}, defaultactorParam),
      showStatus: [true, false],
    };
  },
  created() {
    if (this.isEdit) {
      actor.getActorById(this.$route.query.id).then((res) => {
        this.actorParam = res.data.result;
       // console.log('编辑页面带入信息',this.actorParam)
      });
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      console.log("触发了nextStep");
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit(isEdit) {
      this.$confirm("是否要提交该演员信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (isEdit) {
          (this.actorParam.id = this.$route.query.id),
            actor.updateActor(this.actorParam).then((res) => {
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000,
              });

              this.$router.back();
            });
        } else {
          actor.addActor(this.actorParam).then((response) => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            location.reload();
          });
        }
      });
    },
  },
};
</script>
<style>
.form-container {
  width: 800px;
}
</style>


